layui.use(['form', 'jquery', "layer", "colorpicker"], function () {
    var form = layui.form,
        $ = layui.jquery,
        colorpicker = layui.colorpicker,
        layer = parent.layer === undefined ? layui.layer : top.layer;

    //公告层
    function showNotice() {
        layer.open({
            type: 1,
            title: "系统公告",
            area: '300px',
            shade: 0.8,
            id: 'LAY_layuipro',
            btn: ['知道了'],
            moveType: 1,
            content: '<div style="padding:15px 20px; text-align:justify; line-height: 22px; text-indent:2em;border-bottom:1px solid #e2e2e2;"><p class="layui-red">公告内容</p></div>',
            success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.css('text-align', 'center');
                btn.on("click", function () {
                    tipsShow();
                });
            },
            cancel: function (index, layero) {
                tipsShow();
            }
        });
    }

    function tipsShow() {
        layui.saveCache("showNotice", "true");
        if ($(window).width() > 432) {  //如果页面宽度不足以显示顶部“系统公告”按钮，则不提示
            layer.tips('系统公告躲在了这里', '#userInfo', {
                tips: 3,
                time: 1000
            });
        }
    }

    $(".showNotice").on("click", function () {
        showNotice();
    })

    //功能设定
    $(".functionSetting").click(function () {
        layer.open({
            title: "功能设定",
            area: ["380px", "230px"],
            type: "1",
            content: '<div class="functionSrtting_box">' +
            '<form class="layui-form">' +
            '<div class="layui-form-item">' +
            '<label class="layui-form-label">开启Tab缓存</label>' +
            '<div class="layui-input-block">' +
            '<input type="checkbox" name="cache" lay-skin="switch" lay-text="开|关">' +
            '<div class="layui-word-aux">开启后刷新页面不关闭打开的Tab页</div>' +
            '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
            '<label class="layui-form-label">Tab切换刷新</label>' +
            '<div class="layui-input-block">' +
            '<input type="checkbox" name="changeRefresh" lay-skin="switch" lay-text="开|关">' +
            '<div class="layui-word-aux">开启后切换窗口刷新当前页面</div>' +
            '</div>' +
            '</div>' +
            '<div class="layui-form-item skinBtn">' +
            '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="settingSuccess">设定完成</a>' +
            '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="noSetting">取消</a>' +
            '</div>' +
            '</form>' +
            '</div>',
            success: function (index, layero) {
                //如果之前设置过，则设置它的值
                $(".functionSrtting_box input[name=cache]").prop("checked", layui.obtainCache('cache') == "true" ? true : false);
                $(".functionSrtting_box input[name=changeRefresh]").prop("checked", layui.obtainCache('changeRefresh') == "true" ? true : false);
                //设定
                form.on("submit(settingSuccess)", function (data) {
                    if (layui.obtainCache('cache') != (data.field.cache == "on" ? "true" : "false")) {
                        layui.saveCache('cache', data.field.cache == "on" ? "true" : "false");
                        layui.saveCache("menu", "[]");
                        layui.saveCache("curmenu", 'undefined');
                    }
                    layui.saveCache('changeRefresh', data.field.changeRefresh == "on" ? "true" : "false");
                    layer.closeAll("page");
                    return false;
                });
                //取消设定
                form.on("submit(noSetting)", function () {
                    layer.closeAll("page");
                });
                form.render();  //表单渲染
            }
        })
    })

    //更换皮肤
    function skins() {
        var skin = layui.obtainCache("skin");
        if (skin) {  //如果更换过皮肤
            if (layui.obtainCache("skinValue") != "自定义") {
                $("body").addClass(layui.obtainCache("skin"));
            } else {
                $(".layui-layout-admin .layui-header")[0].style.setProperty('background-color', skin.split(',')[0], 'important');
                $(".layui-bg-black")[0].style.setProperty('background-color', skin.split(',')[1], 'important');
                $(".hideMenu")[0].style.setProperty('background-color', skin.split(',')[2], 'important');
            }
        }
    }

    skins();
    $(".changeSkin").click(function () {
        layer.open({
            title: "更换皮肤",
            area: ["310px", "280px"],
            type: "1",
            content: '<div class="skins_box">' +
            '<form class="layui-form">' +
            '<div class="layui-form-item">' +
            '<input type="radio" name="skin" value="默认" title="默认" lay-filter="default" checked="">' +
            '<input type="radio" name="skin" value="橙色" title="橙色" lay-filter="orange">' +
            '<input type="radio" name="skin" value="蓝色" title="蓝色" lay-filter="blue">' +
            '<input type="radio" name="skin" value="自定义" title="自定义" lay-filter="custom">' +
            '<div class="skinCustom">' +
            '<div><label>顶部：<input type="hidden" value="" name="topSkin">' +
            ' <div class="colorpicker-demo" id="colorpicker-topSkin"></div></label>' +
            '<label>左边：<input type="hidden" value="" name="leftSkin">' +
            ' <div class="colorpicker-demo" id="colorpicker-leftSkin"></div></label></div>' +
            '<div><label>按钮：<input type="hidden" value="" name="btnSkin">' +
            ' <div class="colorpicker-demo" id="colorpicker-btnSkin"></div></label></div>' +
            // '<input type="text" class="layui-input topColor" name="topSkin" placeholder="顶部颜色" />' +
            // '<input type="text" class="layui-input leftColor" name="leftSkin" placeholder="左侧颜色" />' +
            // '<input type="text" class="layui-input menuColor" name="btnSkin" placeholder="顶部菜单按钮" />' +
            '</div>' +
            '</div>' +
            '<div class="layui-form-item skinBtn">' +
            '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="changeSkin">确定更换</a>' +
            '<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="noChangeSkin">朕再想想</a>' +
            '</div>' +
            '</form>' +
            '</div>',
            success: function (index, layero) {

                var colorpicker_change = function (color) {
                    //给当前页面头部和左侧设置主题色
                    switch (this.elem) {
                        case "#colorpicker-topSkin":
                            $(".layui-layout-admin .layui-header")[0].style.setProperty('background-color', color, 'important');
                            break;
                        case "#colorpicker-leftSkin":
                            $(".layui-bg-black")[0].style.setProperty('background-color', color, 'important');
                            break;
                        case "#colorpicker-btnSkin":
                            $(".hideMenu")[0].style.setProperty('background-color', color, 'important');
                            break;
                    }
                }, colorpicker_done = function (color) {
                    $(this.elem).prev().val(color); //向隐藏域赋值
                    layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem);
                    color || this.change(color); //清空时执行 change
                };
                var skin = layui.obtainCache("skin");
                if (layui.obtainCache("skinValue")) {
                    $(".skins_box input[value=" + layui.obtainCache("skinValue") + "]").attr("checked", "checked");
                }
                if ($(".skins_box input[value=自定义]").attr("checked")) {
                    $(".skinCustom").css("visibility", "inherit");
                    $("div.colorpicker-demo").each(function (i, e) {
                        $(e).prev().val(skin.split(',')[i]);
                        colorpicker.render({
                            elem: '#' + $(e).attr("id")
                            , color: skin.split(',')[i]
                            , format: 'hex'
                            , predefine: true
                            , alpha: true
                            , done: colorpicker_done
                            , change: colorpicker_change
                        });
                    });
                }else {
                    $("div.colorpicker-demo").each(function (i, e) {
                        colorpicker.render({
                            elem: '#' + $(e).attr("id")
                            , format: 'hex'
                            , predefine: true
                            , alpha: true
                            , done: colorpicker_done
                            , change: colorpicker_change
                        });
                    });
                }
                form.render();
                $(".skins_box").removeClass("layui-hide");
                $(".skins_box .layui-form-radio").on("click", function () {
                    var skinColor;
                    if ($(this).find("div").text() == "橙色") {
                        skinColor = "orange";
                    } else if ($(this).find("div").text() == "蓝色") {
                        skinColor = "blue";
                    } else if ($(this).find("div").text() == "默认") {
                        skinColor = "";
                    }
                    if ($(this).find("div").text() != "自定义") {
                        $(".topColor,.leftColor,.menuColor").val('');
                        $("body").removeAttr("class").addClass("main_body " + skinColor + "");
                        $(".skinCustom").removeAttr("style");
                        $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
                    } else {
                        $(".skinCustom").css("visibility", "inherit");
                    }
                });
                var skinStr, skinColor;
                form.on("submit(changeSkin)", function (data) {
                    if (data.field.skin != "自定义") {
                        if (data.field.skin == "橙色") {
                            skinColor = "orange";
                        } else if (data.field.skin == "蓝色") {
                            skinColor = "blue";
                        } else if (data.field.skin == "默认") {
                            skinColor = "";
                        }
                        layui.saveCache("skin", skinColor);
                    } else {
                        skinStr = $("input[type=hidden][name=topSkin]").val() + ',' + $("input[type=hidden][name=leftSkin]").val() + ',' + $("input[type=hidden][name=btnSkin]").val();
                        layui.saveCache("skin", skinStr);
                        $("body").removeAttr("class").addClass("main_body");
                    }
                    layui.saveCache("skinValue", data.field.skin);
                    layer.closeAll("page");
                });
                form.on("submit(noChangeSkin)", function () {
                    $("body").removeAttr("class").addClass("main_body " + layui.obtainCache("skin") + "");
                    $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
                    skins();
                    layer.closeAll("page");
                });
            },
            cancel: function () {
                $("body").removeAttr("class").addClass("main_body " + layui.obtainCache("skin") + "");
                $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style");
                skins();
            }
        })
    })

})